<template>
  <!-- 任务管理详情页 -->
  <div class="box">
    <div class="details_top clearfix">
      <span
        class="left"
        v-if="name.length<3"
      > {{((name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
      <span
        class="left"
        v-else-if="name.length>=3"
      > {{((name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
      <ul class="left">
        <li>{{TaskSubject.create_name}}</li>
        <li>{{TaskSubject.create_time}}</li>
        <li>{{TaskSubject.task_title}}</li>
      </ul>
    </div>
    <p class="details_content">{{TaskSubject.task_desc}}</p>
    <div v-if='type==1'>
      <div
        style="position:absolute;top:0px;right:10px"
        v-for="(it,p) in img"
        :key="p"
      >
        <img
          v-if="it.i==status&&type!=3"
          height="150px"
          :src="it.url"
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="details_list">
      <ul>
        <li><span>任务类型</span><span v-if='TaskSubject.is_recruit==0'>招募任务</span><span v-else-if='TaskSubject.is_recruit==2'>多人任务</span></li>
        <li v-if='TaskSubject.is_recruit==0'><span>发布范围</span><span
            style="width:200px;display: inline-block;word-break: break-word;"
            v-if="TaskSubject.Releasescope!=''"
          >{{TaskSubject.Releasescope}}</span><span v-else>全部</span></li>
        <li><span>领取得分</span><span>{{D_name}}:{{TaskSubject.receive_code_d}}</span><span
            style="margin-left:10px"
            v-if='TaskSubject.receive_code_c!=0 && ISC == 1'
          >{{C_name}}:{{TaskSubject.receive_code_c}}</span></li>
        <li><span>领取截至时间</span><span>{{TaskSubject.receive_end_time}}</span></li>
        <li><span>验收人</span><span>{{TaskSubject.check_name}}</span></li>
        <li v-if="type!=3"><span>审核人</span><span>{{TaskSubject.approval_name}}</span></li>
      </ul>
    </div>
    <div
      class="details_list"
      v-for="(item,i) in SubTask"
      :key="i"
    >
    <!-- {{item}} -->
      <ul>
        <li><span>任务标题</span><span>{{item.task_title}}</span></li>
        <li v-if='TaskSubject.is_recruit==2&&item.head!=""'><span>负责人</span><span style="width:200px;display: inline-block;word-break: break-word;">{{item.head}}</span></li>
        <li v-if="type==3&&TaskSubject.is_recruit==0"><span>领取人</span><span v-if='item.user_name==""||item.user_name==null'>待领取</span><span v-else>{{item.user_name}}</span></li>
        <li v-if='type==1&&status==4&&item.status!=2&&TaskSubject.is_recruit==2&&Number(item.operation_task_sum)!=Number(item.actual_task_sum)'><span>执行人</span><span
            style="background:#59d1ff;width:80px;color:#fff;text-align:center;border-radius:10%/50%;padding:5px;font-size:15px"
            @click="show_Receive(item)"
          >{{Receiving_status}}</span></li>
        <li v-if="type==1&&TaskSubject.is_recruit==0"><span>领取状态</span><span
            v-for="(it,index) in status_list"
            :key="index"
          ><span v-if="it.index==item.status"><span
                v-if="it.index==1"
                style="background:#59d1ff;width:80px;color:#fff;text-align:center;border-radius:10%/50%;padding:5px;font-size:15px"
                @click="show_Receive(item)"
              >{{Receiving_status}}</span><span v-else>{{it.name}}</span></span></span></li>
        <li><span>开始时间</span><span>{{item.start_time}}</span></li>
        <li><span>结束时间</span><span>{{item.end_time}}</span></li>
        <li><span>完成得分</span><span>{{D_name}}:{{item.complete_code_d}}</span><span
            style="margin-left:10px"
            v-if='item.complete_code_c!=0 && ISC == 1'
          >{{C_name}}:{{item.complete_code_c}}</span></li>
        <li><span>逾期扣分</span><span>{{D_name}}:{{item.overtime_code_d}}/天</span><span
            style="margin-left:10px"
            v-if='item.overtime_code_c!=0 && ISC == 1'
          >{{C_name}}:{{item.overtime_code_d}}/分</span></li>
        <li><span>逾期上限</span><span>{{item.overtime_end_day}}天</span></li>
      </ul>
    </div>
    <!-- 图片 -->
    <van-image-preview
      v-model="show"
      :images="images"
      @change="onChange"
    >
      <template v-slot:index>{{index+1}}/{{images.length}}</template>
    </van-image-preview>
    <div
      class="details_list"
      style="border-bottom:1px solid silver"
      v-if="images.length!=0"
    >
      <span style="display: inline-block;width: 120px;">图片</span><span
        v-for="(img , s) in images"
        :key="s"
        style="display:inlin-block"
      ><img
          @click="show_file(img)"
          style="height:80px;margin-right:5px;vertical-align:middle"
          :src="img"
        ></span>
    </div>
    <!-- 附件 -->
    <!-- <div
      class="details_list"
      style="border-bottom:1px solid silver"
      v-if="file.length!=0"
    >
      <span style="display: inline-block;width: 120px;">附件</span><span
        v-for="(f , l) in file"
        :key="l"
        style="display:inlin-block"
      ><img
          @click="show_files(f)"
          style="height:80px;margin-right:5px;vertical-align:middle"
          :src="f"
        ></span>
    </div> -->
    <div
      class="details_list"
      style="border-bottom:1px solid #c0c0c04d"
      v-if="file.length!=0"
    >
      <span style="display: inline-block;width: 120px;">附件</span><span
        v-for="(f , l) in file"
        :key="l"
        style="display:inline-block"
      >
        <span style="padding:8px;line-height:80px;height:80px;display:inline-block;border:1px solid #c0c0c04d">
          <a :href="f">
            附件下载
          </a>
        </span>
      </span>
    </div>
    <div
      v-if="type==1"
      style="text-align:right;padding:30px 20px 10px;background:#fff;border-bottom:1px solid silver"
      @click="show_click"
    >
      <van-icon
        :style="{fontSize:'32px'}"
        name="comment-circle-o"
      />
    </div>
    <van-row
      v-if="type==3 && status==0"
      :style="{background:'#fff',padding:'15px 30px',marginTop:'10px'}"
    >
      <p>发送至群聊</p>
      <div style="margin-left:20px;padding-top:10px">
        <span
          v-for="(tt,p) in tag_list"
          :key="p+'i'"
          style="margin:5px;display:inline-block"
        >
          <van-tag
            closeable
            size="medium"
            type="primary"
            @close="close(p)"
          >
            {{tt.title}}
          </van-tag>
        </span>
        <div>
          <van-icon
            name="add-o"
            @click="show_jsapi()"
          />
          <p
            style="font-size:14px;"
            @click="show_jsapi()"
          >添加</p>
        </div>
      </div>

    </van-row>
    <van-row
      v-if="type==3 && status==0"
      :style="{background:'#fff',padding:'15px 15px',borderTop:'1px solid #c0c0c06b',borderBottom:'1px solid #c0c0c06b'}"
    >
      <van-field
        v-model="message"
        rows="4"
        autosize
        label="审核意见"
        type="textarea"
        placeholder="请输入审批意见"
      />
    </van-row>
    <van-row
      v-if="type==3 && status==0"
      :style="{background:'#fff',padding:'15px 5px'}"
    >
      <van-button
        size="large"
        plain
        type="info"
        @click="showReject()"
      >驳回</van-button>
      <van-button
        size="large"
        type="info"
        :style="{marginLeft:'10px'}"
        @click="showAgree()"
      >同意</van-button>
    </van-row>
    <!-- 评论内容 -->
    <p v-show='checked_time'>暂无评论</p>
    <van-dialog
      v-model="show_dialog"
      title="标题"
      show-cancel-button
      @confirm='showConfirm'
    >
      <van-field
        v-model="field_value"
        placeholder="请输入评论内容"
        :style="{fontSize:'16px',textAlign:'center'}"
      />
    </van-dialog>
    <div v-if='type==1'>
      <div
        class="details_comment"
        v-for="(ol ,y) in comment_list"
        :key="y+'ol'"
      >
        <div class="details_comment_title clearfix">
          <span
            class="left"
            v-if='ol.user_avatar!=""&&ol.user_avatar!=null'
          ><img
              style="width:100%;height:100%;border-radius:20px"
              :src="ol.user_avatar"
            >
          </span>
          <span
            v-else-if="ol.user_avatar==''"
            class="left"
          >
            <span
              class="left"
              v-if="ol.user_name.length<3"
            >{{((ol.user_name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="left"
              v-else-if="ol.user_name.length>=3"
            > {{((ol.user_name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>

          </span>
          <ul class="left">
            <li>{{ol.user_name}}</li>
            <li>{{ol.create_time | dateFrm}}</li>
          </ul>
        </div>
        <p>{{ol.comment_desc}}</p>
      </div>
    </div>
  </div>

</template>

<script type="text/javascript">
import moment from "moment";
import "moment/locale/zh-cn";
import { Icon, Row, Button, Field, Dialog, Tag, Toast } from "vant";
export default {
  data() {
    return {
      checked_time: false,
      show_dialog: false,
      field_value: "",
      // 1、任务可以领取 2、任务无法领取已经超过领取时间、3已经完成、 4、审核未通过 5、审核中 6、进行中 7、验收中 8、验收驳回
      TaskSubject: [],
      SubTask: [],
      status_list: [
        { name: "任务领取", index: 1 },
        {
          name: "任务无法领取已经超过领取时间",
          index: 2
        },
        {
          name: "已完成",
          index: 3
        },
        {
          name: "审核未通过",
          index: 4
        },
        {
          name: "审核中",
          index: 5
        },
        {
          name: "进行中",
          index: 6
        },
        {
          name: "验收中",
          index: 7
        },
        {
          name: "验收驳回",
          index: 8
        }
      ],
      images: [],
      file: [],
      show: false,
      index: 0,
      type: 0,
      status: 0,
      Receiving_status: "点击领取",
      message: "",
      cId: 0,
       img: [
        { url: '', i: 4 },
        {
          url:'',
          i: 0
        },
        {
          url: "",
          i: 1
        },
        {
          url: "",
          i: 7
        }
      ],
      C_name: "C分",
      D_name: "D分",
      comment_list: [],
      tag_list: [],
      Auditor_id: 0,
      sub_num: 0,
      name: "",
      ISC:''
    };
  },
  filters: {
    dateFrm: function(el) {
      return moment(el, "YYYY-MM-DD HH:mm:ss").fromNow();
    }
  },
  created() {
    this.status = this.$route.query.status;
    this.getUserId();
    dd.biz.navigation.setTitle({
      title: "详情" //控制标题文本，空字符串表示显示默认文本
    });
  },
  beforeUpdate() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
  },
  methods: {
     //C分开关
    async getIsC(){
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getIsC?corpId=${corpId}`
      );
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code
    },
    // 钉钉鉴权
    async show_js_api() {
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let url = location.href.split("#")[0];
      const res = await this.$http.get(
        `dingapi/getJsapiConfig?corpId=${corpId}&url=${url}`
      );
      let config = res.data.data;
      localStorage.setItem("appId", config.agentId);
      dd.config({
        agentId: config.agentId,
        corpId: config.corpId,
        timeStamp: config.timeStamp,
        nonceStr: config.nonceStr,
        signature: config.signature,
        jsApiList: [
          "runtime.info",
          "biz.ding.post",
          "biz.ding.create",
          "biz.chat.pickConversation",
          "device.notification.prompt",
          "device.notification.confirm",
          "device.notification.alert",
          "biz.navigation.setRight",
          "biz.chat.open",
          "biz.util.open",
          'biz.util.openLink',
          "biz.user.get",
          "biz.contact.choose",
          "biz.telephone.call",
          "biz.util.uploadImage",
          // "device.accelerometer.watchShake",
          // "biz.map.locate",
          // "device.geolocation.get",
          "biz.customContact.choose",
          "biz.contact.complexPicker",
          "biz.contact.departmentsPicker",
        ]
      });
    },
    // 自定义名称存储
    async getCustomName() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getCustomName?corpId=${corpId}`
      );
      if (res.data.errcode == "0000") {
        if (res.data.data.c_name == "") {
          localStorage.setItem("c_name", "C分");
        } else {
          localStorage.setItem("c_name", res.data.data.c_name);
        }
        if (res.data.data.d_name == "") {
          localStorage.setItem("d_name", "D分");
        } else {
          localStorage.setItem("d_name", res.data.data.d_name);
        }
      } else {
        localStorage.setItem("c_name", "C分");
        localStorage.setItem("d_name", "D分");
      }
    },
    //鉴权
    async getUserId() {
      let Corp_Id = localStorage.getItem("custid");
      let User_Id = localStorage.getItem("userId");
      let corpId = this.$utils.getUrlKey("custid");
      if (corpId == null || corpId == "undefined") {
        corpId = Corp_Id;
      } else {
        localStorage.setItem("custid", corpId);
      }
      var _this = this;
      let code = "";
      if (User_Id && User_Id != "undefined" && User_Id != null) {
        if (Corp_Id != corpId) {
          await dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: function(result) {
              code = result.code;
            },
            onFail: function(err) {}
          });
          _this.$http
            .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
            .then(res => {
              localStorage.setItem("userId", res.data.data.dd_id);
              localStorage.setItem("custid", corpId);
              _this.getCustomName();
              _this.taskHallInfo();
              _this.show_js_api();
              _this.getIsC();
            });
        } else {
          _this.taskHallInfo();
          _this.show_js_api();
          _this.getIsC();
        }
      } else {
        await dd.runtime.permission.requestAuthCode({
          corpId: corpId,
          onSuccess: function(result) {
            code = result.code;
          },
          onFail: function(err) {}
        });
        _this.$http
          .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
          .then(res => {
            localStorage.setItem("userId", res.data.data.dd_id);
            localStorage.setItem("custid", corpId);
            _this.getCustomName();
            _this.taskHallInfo();
            _this.show_js_api();
            _this.getIsC();
          });
      }
    },
    // 标签关闭事件
    close(tag) {
      this.tag_list.splice(this.tag_list.indexOf(tag), 1);
    },
    show_click() {
      this.show_dialog = true;
      this.field_value = "";
    },
    // 任务评论
    async showConfirm() {
      if (this.field_value == "") {
        Toast("评论内容不能为空");
        return;
      }
      this.sub_num = this.sub_num + 1;
      if (this.sub_num > 1) {
        Toast("请勿重复提交");
        return;
      }
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const id = this.$route.query.id;
      const res = await this.$http.get(
        `yuepoints/comment?corpId=${corpId}&userId=${userId}&id=${id}&content=${this.field_value}`
      );
      if (res.data.errcode == "0000") {
        this.sub_num = 0;
        this.comment_list.push(res.data.data);
      }
    },
    // 发送至群聊
    show_jsapi() {
      let corpId = localStorage.getItem("custid");
      let _this = this;
      dd.biz.chat.pickConversation({
        corpId: corpId, //企业id,必须是用户所属的企业的corpid
        isConfirm: "false", //是否弹出确认窗口，默认为true
        onSuccess: function(res) {
          //onSuccess将在选择结束之后调用
          // 该cid和服务端开发文档-普通会话消息接口配合使用，而且只能使用一次，之后将失效
          _this.cId = res.cid;
          _this.tag_list.push({ id: res.cid, title: res.title });
        },
        onFail: function() {}
      });
    },
    // 消息发送
    async show_msg() {
      let corpId = localStorage.getItem("custid");
      let userId = localStorage.getItem("userId");
      const user_id = this.$route.query.id;
      let res_user = "";
      for (let i = 0; i < this.tag_list.length; i++) {
        res_user += `${this.tag_list[i].id},`;
      }
      await this.$http
        .get(
          `yuepoints/GroupMessage?corpId=${corpId}&userId=${userId}&cId=${res_user}&id=${user_id}&type=2`
        )
        .then(res => {
          // alert(JSON.stringify(res));
          // if (res.data.errcode == "0000") {
          // }
        });
    },
    // 驳回
    async showReject() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const id = this.$route.query.id;
      Toast.loading({
        message: "数据提交中",
        forbidClick: true,
        loadingType: "spinner"
      });
      const res = await this.$http.get(
        `yuepoints/Task/Toexamine?corpId=${corpId}&userId=${userId}&tId=${id}&status=1&desc=${this.message}&cid=${this.cId}`
      );
      if (res.data.errcode == "0000") {
        Toast.success("驳回成功");
        this.$router.push({
          path: "/task"
        });
      }
    },
    // 同意
    async showAgree() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const id = this.$route.query.id;
      Toast.loading({
        message: "数据提交中",
        forbidClick: true,
        loadingType: "spinner"
      });
      const res = await this.$http.get(
        `yuepoints/Task/Toexamine?corpId=${corpId}&userId=${userId}&tId=${id}&status=4&desc=${this.message}&cid=${this.cId}`
      );
      if (res.data.errcode == "0000") {
        Toast.success("审核成功");
        if (this.cId != 0) {
          this.show_msg();
        }
        this.$router.push({
          path: "/task"
        });
      }
    },
    // 领取状态
    async show_Receive(it) {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/receiveTasks?corpId=${corpId}&userId=${userId}&taskId=${it.id}`
      );
      if (res.data.errcode == "0000") {
        this.Receiving_status = "领取成功";
        this.$toast("请在逾期时间内完成任务");
        this.$router.push({
          path: "/home",
          query: {
            active: 2
          }
        });
      } else {
        this.$toast(res.data.errmsg);
      }
    },
    show_file(img) {
      this.show = true;
    },
    onChange(index) {
      this.index = index;
    },
    //   展示数据
    async taskHallInfo() {
      const id = this.$route.query.id;
      const type = this.$route.query.type;
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      if (userId == null || userId == "undefined") {
        // Toast("请在钉钉工作台悦积分入口进入查看");
        this.$router.replace("/error");
        return false;
      }
      this.type = type;
      let res;
      if (type == 1) {
        res = await this.$http.get(
          `yuepoints/taskHallInfo?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      } else if (type == 2) {
        res = await this.$http.get(
          `yuepoints/iReleasedInfo?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      } else if (type == 3) {
        res = await this.$http.get(
          `yuepoints/myAuditInfo?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      }
      const { TaskSubject, SubTask, comment } = res.data.data;
      if (comment != undefined) {
        this.comment_list = comment;
        this.checked_time = false;
      }
      this.TaskSubject = TaskSubject;
      this.name = this.TaskSubject.create_name;
      this.SubTask = SubTask;
      if (!this.isEmpty(TaskSubject.img_url)) {
        if (TaskSubject.img_url.indexOf(",") > -1) {
          this.images = TaskSubject.img_url
            .split(",")
            .reverse()
        } else {
          this.images.push(TaskSubject.img_url);
        }
      }
      if (!this.isEmpty(TaskSubject.file_url)) {
        if (TaskSubject.file_url.indexOf(",") > -1) {
          this.file = TaskSubject.file_url
            .split(",")
            .reverse()
            .splice(1)
            .reverse();
        } else {
          this.file.push(TaskSubject.file_url);
        }
      }
    },
    isEmpty(obj) {
      if (typeof obj == "undefined" || obj == null || obj == "") {
        return true;
      } else {
        return false;
      }
    }
  },
  components: {
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Button.name]: Button,
    [Field.name]: Field,
    [Dialog.Component.name]: Dialog.Component,
    [Tag.name]: Tag
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding-bottom: 0px;
  /deep/ .van-icon-add-o {
    font-size: 22px;
    color: dodgerblue;
    margin-top: 20px;
  }
  /deep/ .van-row {
    padding: 0px 15px;
    text-align: left;
  }
  /deep/ .van-button--large {
    width: 48%;
    height: 40px;
    line-height: 40px;
  }
  /deep/.van-cell{
    padding:10px 15px 10px 25px;
  }
  /deep/.van-field__label{
    width:120px;
  }
  .details_top {
    position: relative;
    text-align: left;
    padding: 30px 30px 10px;
    background: #fff;
    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      background-color: #59d1ff;
      color: #fff;
    }
    ul {
      margin-left: 10px;
      background: #fff;
    }
    li:nth-child(2) {
      font-size: 12px;
      color: silver;
    }
    li:nth-child(3) {
      font-size: 16px;
      margin-top: 5px;
    }
  }
  .details_content {
    margin: 0px;
    text-align: left;
    padding: 10px 30px;
    font-size: 14px;
    background: #fff;
  }
  .details_list {
    font-size: 16px;
    text-align: left;
    padding: 10px 20px 5px 30px;
    border-top: 1px solid silver;
    // border-bottom: 1px solid silver;
    background: #fff;
    // ul{
    //     border-top: 1px solid silver;
    // }
    li {
      margin-bottom: 5px;
      span:nth-child(1) {
        display: inline-block;
        width: 120px;
        vertical-align: middle;
      }
    }
  }
  .details_comment {
    margin: 10px 30px;
    .details_comment_title {
      span {
        font-size: 13px;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        background-color: #59d1ff;
        color: #fff;
      }
      ul {
        margin-left: 10px;
      }
      li:nth-child(2) {
        font-size: 12px;
        color: silver;
      }
    }
    p {
      text-align: left;
    }
  }
}
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
